<template>
  <div class="app-container">
    <info-page-container>
      <template slot="body">
        <div class="chit-add-body">
          <el-scrollbar>

            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
              <!--      保单信息        -->
              <div class="info-model">
                <decorate :title="'保单信息'"></decorate>
                <el-form-item label="保单标题" prop="bdbt">
                  <el-input
                      v-model="form.bdbt"
                      placeholder="请输入保单标题"
                      type="textarea"
                      clearable
                  >
                  </el-input>
                </el-form-item>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="保险单号码" prop="bxdhm">
                    <el-input
                        v-model="form.bxdhm"
                        placeholder="请输入保险单号码"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item class="half-item" label="投保确认码" prop="tbqrm">
                    <el-input
                        v-model="form.tbqrm"
                        placeholder="请输入投保确认码"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                </div>

                <el-form-item label="保单条款" prop="bdtk">
                  <el-input
                      v-model="form.bdtk"
                      type="textarea"
                      placeholder="请输入保单条款"
                      clearable
                  >
                  </el-input>
                </el-form-item>
              </div>
              <!--      农户信息        -->
              <div class="info-model">
                <decorate :title="'农户信息'"></decorate>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="投保人" prop="tbr">
                    <el-input
                        v-model="form.tbr"
                        placeholder="请输入保险单号码"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item class="half-item" label="被保险人" prop="bbxr">
                    <el-input
                        v-model="form.bbxr"
                        placeholder="请输入投保确认码"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="证件类型" prop="zjlx">
                    <el-select v-model="form.zjlx">
                      <el-option
                          v-for="dict in dict.type.order_base_zjlx"
                          :key="dict.value"
                          :label="dict.label"
                          :value="dict.value"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item class="half-item" label="证件号码" prop="zjhm">
                    <el-input
                        v-model="form.zjhm"
                        placeholder="请输入投保确认码"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="种植地点" prop="zzdd">
                    <el-input
                        v-model="form.zzdd"
                        placeholder="请输入种植地点"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item class="half-item" label="投保组织者" prop="tbzzz">
                    <el-input
                        v-model="form.tbzzz"
                        placeholder="请输入投保组织者"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="联系人" prop="lxr">
                    <el-input
                        v-model="form.lxr"
                        placeholder="请输入联系人"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item class="half-item" label="联系电话" prop="lxdh">
                    <el-input
                        v-model="form.lxdh"
                        placeholder="请输入联系电话"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                </div>
              </div>

              <!--        a      -->
              <div class="info-model">
                <decorate :title="'其他信息'"></decorate>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="联/共保标志" prop="lgbbz">
                    <el-input
                        v-model="form.lgbbz"
                        placeholder="请输入联/共保标志"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item class="half-item" label="联/共保份额(%)" prop="lgbfe">
                    <el-input
                        type="number"
                        v-model="form.lgbfe"
                        placeholder="请输入联/共保份额"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <el-form-item label="保费构成" prop="bfgc">
                  <el-input
                      v-model="form.bfgc"
                      placeholder="请输入保费构成"
                      type="textarea"
                      clearable
                  >
                  </el-input>
                </el-form-item>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="保险生效日期" prop="bxks">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                                    v-model="form.bxks" clearable style="width: 100%; "></el-date-picker>
                  </el-form-item>
                  <el-form-item class="half-item" label="保险失效日期" prop="bxjs">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                                    v-model="form.bxjs" clearable style="width: 100%; "></el-date-picker>
                  </el-form-item>
                </div>
                <div style="margin-bottom: 10px" class="num-row">
                  <div class="label">保险天数</div>
                  <div class="value">
                    <el-row>
                      <el-col :span="15"> {{ form.bxts == null ? 0 : form.bxts }}天</el-col>
                    </el-row>
                  </div>
                </div>
                <el-form-item label="争议处理" prop="zycl">
                  <el-radio-group v-model="form.zycl">
                    <el-radio :label="1">协商</el-radio>
                    <el-radio :label="2">提交
                      <el-input
                          v-model="form.zyclZc"
                          placeholder=""
                      >
                      </el-input>
                      仲裁
                    </el-radio>
                    <el-radio :label="3">诉讼</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="特别约定" prop="tbyd">
                  <el-input
                      v-model="form.tbyd"
                      placeholder="请输入特别约定"
                      type="textarea"
                      clearable
                  >
                  </el-input>
                </el-form-item>
              </div>

              <!--        承保公司信息      -->
              <div class="info-model">
                <decorate :title="'承保公司信息'"></decorate>
                <el-form-item label="乙方公司名称" prop="yf">
                  <el-input
                      v-model="form.yf"
                      placeholder="请输入乙方公司名称"
                      type="textarea"
                      clearable
                  >
                  </el-input>
                </el-form-item>
                <el-form-item label="承保公司地址" prop="cbgsdz">
                  <el-input
                      v-model="form.cbgsdz"
                      placeholder="请输入承保公司地址"
                      type="textarea"
                      clearable
                  >
                  </el-input>
                </el-form-item>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="联系电话" prop="cblxdh">
                    <el-input
                        v-model="form.cblxdh"
                        placeholder="请输入联系电话"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item class="half-item" label="邮政编码" prop="yzbb">
                    <el-input
                        v-model="form.yzbb"
                        placeholder="请输入邮政编码"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="服务电话" prop="fwdh">
                    <el-input
                        v-model="form.fwdh"
                        placeholder="请输入服务电话"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item class="half-item" label="投诉专线" prop="tszx">
                    <el-input
                        v-model="form.tszx"
                        placeholder="请输入投诉专线"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="核保" prop="hbr">
                    <el-input
                        v-model="form.hbr"
                        placeholder="请输入核保"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item class="half-item" label="提交人" prop="tjr">
                    <el-input
                        v-model="form.tjr"
                        placeholder="请输入提交人"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                </div>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="操作员" prop="czy">
                    <el-input
                        v-model="form.czy"
                        placeholder="请输入操作员"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item class="half-item" label="签订日期" prop="yfrq">
                    <el-date-picker value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
                                    v-model="form.yfrq" clearable style="width: 100%; "></el-date-picker>
                  </el-form-item>

                </div>
                <el-form-item label="总公司地址" prop="zgsdz">
                  <el-input
                      v-model="form.zgsdz"
                      placeholder="请输入总公司地址"
                      type="textarea"
                      clearable
                  >
                  </el-input>
                </el-form-item>
                <div class="flex-row form-item-parent">
                  <el-form-item class="half-item" label="邮编" prop="yb">
                    <el-input
                        v-model="form.yb"
                        placeholder="请输入邮编"
                        clearable
                    >
                    </el-input>
                  </el-form-item>
                  <el-form-item class="half-item" label="网址" prop="wz">
                    <el-input
                        v-model="form.wz"
                        placeholder="请输入网址"
                        clearable
                    >
                    </el-input>
                  </el-form-item>

                </div>
              </div>

              <!--        保单附件      -->
              <div class="info-model">
                <decorate :title="'保单附件'"></decorate>
                <el-form-item class="column-item annex-box" label="保单原件" prop="fileIds">
                  <template slot="label">
                    保单原件
                    <el-button class="file-upload-bt" icon="el-icon-refresh" size="mini"
                               @click="upload(insuranceUid)">上传文件保单原件
                    </el-button>
                  </template>
                  <show-file-list :file-list="insuranceFileList" @delFile="delInsuranceFile"></show-file-list>
                </el-form-item>
                <el-form-item class="column-item annex-box" label="保单明细" prop="fileIds">
                  <template slot="label">
                    保单明细
                    <el-button class="file-upload-bt" icon="el-icon-refresh" size="mini"
                               @click="upload(insuranceDetailUid)">上传保单明细文件
                    </el-button>
                  </template>
                  <show-file-list :file-list="insuranceDetailFileList" @delFile="delInsuranceDetailFile"></show-file-list>
                </el-form-item>
              </div>

              <el-tabs v-model="activeName">
                <el-tab-pane label="保险信息" name="insuranceInformation">
                  <value-table :value-config="valueTableConfig" v-model="form.insuranceItems"></value-table>
                  <div class="num-row" v-if="form.zbxjeSz > 0">
                    <div class="label">总保险金额</div>
                    <div class="value">
                      <el-row>
                        <el-col :span="15"> {{ form.zbxjeHz }}</el-col>
                        <el-col :span="9">￥{{ form.zbxjeSz }}</el-col>
                      </el-row>
                    </div>
                  </div>
                  <div class="num-row" v-if="form.zbxfSz > 0">
                    <div class="label">总保险费</div>
                    <div class="value">
                      <el-row>
                        <el-col :span="15"> {{ form.zbxfHz }}</el-col>
                        <el-col :span="9">￥{{ form.zbxfSz }}</el-col>
                      </el-row>
                    </div>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="保单明细" name="policyDetails">
                  <value-table :dialog-form-label-width="`200px`" :dialog-width="`700px`" :value-config="valueTableDetailsConfig" v-model="form.orderDetails"></value-table>
                </el-tab-pane>
              </el-tabs>
            </el-form>



          </el-scrollbar>
        </div>
      </template>
      <template slot="footer">
        <el-button type="primary" size="mini" @click="submitData">保存</el-button>
      </template>
    </info-page-container>
  </div>
</template>

<script>
import Decorate from "@/views/components/Decorate/index.vue";
import {chitSubPageMixins} from "@/views/chit/mixins/chitSubPageMixins";
import {isArr} from "@/utils/arrayUtil";
import {UploadFileObj} from "@/utils/uploadFile";
import ValueTable from "@/components/ValueTable/index.vue";
import {digitUppercase, getDiffDay} from "@/utils/baseUtil";
import guid from "@/utils/guid";
import ShowFileList from "@/components/ShowFileList/index.vue";
import {addOrder, updateOrder} from "@/api/chit/chitListPage";
import {CHIT_DETAIL_CONFIG, INSURANCE_CONFIG} from "@/constantData";

export default {
  dicts: ['order_base_zjlx'],
  name: "chitAdd",
  mixins: [chitSubPageMixins],
  components: {
    Decorate,
    ValueTable,
    ShowFileList,
  },
  data() {
    return {
      insuranceUid:`p${guid()}`,
      insuranceDetailUid:`p${guid()}`,
      activeName:'insuranceInformation',
      valueTableConfig: _.cloneDeep(INSURANCE_CONFIG),
      valueTableDetailsConfig:_.cloneDeep(CHIT_DETAIL_CONFIG),
      form: {},
      baseForm: {
        id: null,
        //  保单类型
        orderType: null,


        areaCode: null,
        areaType: null,

        // 保单标题
        bdbt: null,
        //  保单条款
        bdtk: null,
        //  保险单号码
        bxdhm: null,
        //  投保确认码
        tbqrm: null,
        //  投保人
        tbr: null,
        //  被保险人
        bbxr: null,
        //  证件类型
        zjlx: null,
        //  证件号码
        zjhm: null,
        //  种植地点
        zzdd: null,
        //  投保组织者
        tbzzz: null,
        //  联系人
        lxr: null,
        //  联系电话
        lxdh: null,
        //  总保险金额汉字
        zbxjeHz: null,
        //  总保险金额数字
        zbxjeSz: null,
        //  总保险费汉字
        zbxfHz: null,
        //  总保险费数字
        zbxfSz: null,
        //  联/共保标志
        lgbbz: null,
        //  联/共保份额(%)
        lgbfe: null,
        //  保费构成
        bfgc: null,
        //  保险开始日期
        bxks: null,
        //  保险结束日期
        bxjs: null,
        //  保险天数
        bxts: null,
        //  争议处理
        zycl: null,
        //  争议处理的提交仲裁
        zyclZc: null,
        //  特别约定
        tbyd: null,
        //  特别说明
        tbsm: null,
        //  承保公司地址
        cbgsdz: null,
        //  承保公司联系电话
        cblxdh: null,
        //  邮政编码
        yzbb: null,
        //  服务电话
        fwdh: null,
        //  投诉专线
        tszx: null,
        //  乙方公司名称
        yf: null,
        //  乙方下面的日期
        yfrq: null,
        //  核保
        hbr: null,
        //  提交人
        tjr: null,
        //  操作员
        czy: null,
        //  总公司地址
        zgsdz: null,
        //  邮编
        yb: null,
        //  网址
        wz: null,
        // 保险农作物
        insuranceItems: [],
        // 保单明显
        orderDetails:[],
        //  保单原件
        insuranceFile: [],
        //  保单明细
        insuranceDetailFile: [],
      },
      rules: {
        bxdhm: [
          {required: true, message: "保险单号码不能为空", trigger: "blur"}
        ],
        tbqrm: [
          {required: true, message: "投保确认码不能为空", trigger: "blur"}
        ],
      },
    }
  },
  computed: {
    bxts() {
      let {form: {bxks, bxjs}} = this;
      if (bxks == null || bxks == '' || bxjs == null || bxjs == '') return 0;
      let ksTime = new Date(`${bxks} 00:00:00`)
      let jsTime = new Date(`${bxjs} 24:00:00`)
      return getDiffDay(jsTime, ksTime)
    },
    insuranceFileList() {
      let res = this.$store.state.temporaryFile.temporaryFileList
      return isArr(res) && res.some(item => item.uid == this.insuranceUid) ? res.find(item => item.uid == this.insuranceUid).fileList : []
    },
    insuranceDetailFileList() {
      let res = this.$store.state.temporaryFile.temporaryFileList
      return isArr(res) && res.some(item => item.uid == this.insuranceDetailUid) ? res.find(item => item.uid == this.insuranceDetailUid).fileList : []
    }
  },
  watch: {
    bxts(val) {
      this.form.bxts = val
    },
    'form.insuranceItems': {
      handler(val) {
        let dataList = isArr(val) ? _.cloneDeep(val) : [];
        this.form.zbxjeSz = _.sum(dataList.map(item => parseFloat(item.bxje)).filter(item => item != null && item != '' && !isNaN(item)))
        this.form.zbxjeHz = digitUppercase(this.form.zbxjeSz)
        this.form.zbxfSz = _.sum(dataList.map(item => parseFloat(item.bxf)).filter(item => item != null && item != '' && !isNaN(item)))
        this.form.zbxfHz = digitUppercase(this.form.zbxfSz)
      },
      deep: true,
    },
    insuranceFileList(val) {
      this.form.insuranceFile = isArr(val) ? val.map(file => file.fileId) : [];
    },
    insuranceDetailFileList(val) {
      this.form.insuranceDetailFile = isArr(val) ? val.map(file => file.fileId) : [];
    },
  },
  methods: {
    setFormData(formData) {
      this.form = formData || this.baseForm
      if (isArr(formData?.insuranceDetailFileVos)){
        this.$store.dispatch('temporaryFile/addDocList', {uid: this.insuranceDetailUid, fileList: formData.insuranceDetailFileVos})
      }
      if (isArr(formData?.insuranceFileVos)){
        this.$store.dispatch('temporaryFile/addDocList', {uid: this.insuranceUid, fileList: formData.insuranceFileVos})
      }
    },
    goParent() {
      this.$router.back(-1)
    },
    submitData() {
      let owner = this
      this.$refs["form"].validate(valid => {
        if (valid) {
          this.startLoading('正在加载....')
          if (this.form.id != null) {
            updateOrder(this.form).then(response => {
              owner.$modal.msgSuccess('更新成功')
              owner.open = false
              owner.goParent()
            }).finally(() => {
              owner.endLoading()
            });
          } else {
            addOrder(this.form).then(response => {
              owner.$modal.msgSuccess('新增成功');
              owner.goParent()
            }).finally(() => {
              owner.infoOpen = false
              owner.endLoading()
            });
          }
        }
      })
    },
    /** 上传文件 */
    upload(uid) {
      let uploadObj = UploadFileObj.getInstance();
      uploadObj.uploadFile('temporaryFile/addDoc', {uid})
    },
    delInsuranceFile(item) {
      this.delFile(item, this.insuranceUid)
    },
    delInsuranceDetailFile(item) {
      this.delFile(item, this.insuranceDetailUid)
    },
    //删除附件列表中附件回调函数
    delFile(item, uid) {
      let owner = this
      this.$modal.confirm('是否确认删除该数据项？').then(function () {
        let {fileId, fileName,} = item
        owner.$store.dispatch("temporaryFile/removeProjectDoc", {uid, fileId, fileName,},).then(() => {
          owner.$modal.msgSuccess("删除成功");
        }).catch(() => {
        });
      })
    },
  }
}
</script>

<style scoped lang="scss">
@import "@/assets/style/businessTheme.scss";

::v-deep .body-container {
  display: flex;
  justify-content: center;

  .chit-add-body {
    width: 90%;
    height: 100%;

    .info-model {
      margin-bottom: 20px;
    }
  }


  .el-radio-group {
    width: 100%;

    .el-radio {
      .el-radio__label {
        .el-input {
          width: auto;
          .el-input__inner{
            border-radius: 0;
            border: {
              top: none;
              left: none;
              right: none;
            };
          }
        }
      }
    }
  }
}

</style>
